<template>
  <div class="app-container">
    <el-card>
      <div>
        <ElLine :title="'事项信息'"/>
        <el-descriptions
          class="margin-top"
          :column="3"
          border
        >
          <el-descriptions-item label-align="center" :span="2" label="事项名称">{{ matterInfo.matterName }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="事项类型">{{ matterInfo.workContentType == 0 ? "市场类" : "非市场类" }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="所属部门">{{ matterInfo.dept }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="2" label="事项内容">{{ matterInfo.matterContent }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="完成时间">{{ matterInfo.summaryDate }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="2" label="是否关注">{{ matterInfo.isFollowed?"是":"否" }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="负责人">{{ matterInfo.matterResponsible }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="关联人">{{ matterInfo.em2 }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="3" label="协同人">{{ matterInfo.collaborators }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="3" label="关联制度">{{ matterInfo.systemName }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="3" label="关联法律">{{ getRelatedLawName(matterInfo.relatedLawId).label }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="3" label="成立专班">{{ matterInfo.isSpecialTeamFormed == 0 ? "已成立" : "未成立" }}</el-descriptions-item>
          <el-descriptions-item label-align="center" :span="3" label="是否催办">
            <el-tag type="danger" v-if="matterInfo.em5 === '1'">已催办</el-tag>
            <el-tag type="success" v-else>未催办</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label-align="center" :span="1" label="超期天数">
            <el-tag type="danger" v-if="overdueDays > 0">超期{{overdueDays}}天</el-tag>
            <el-tag type="success" v-else>未超期</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <matterWork style="margin-top: 20px;margin-bottom: 20px;" :row-data="rowData"></matterWork>
        <matterRecord :row-data="rowData"></matterRecord>
        <matterReport style="margin-top: 20px;" :row-data="rowData"></matterReport>
      </div>
    </el-card>
  </div>
</template>

<script>
import matterWork from "@/views/matter/matterWork.vue";
import matterRecord from "@/views/matter/matterRecord.vue";
import matterReport from "@/views/matter/matterReport.vue";
import {
  reactive,
  toRefs,
  ref,
  computed,
  watch,
  getCurrentInstance,
} from "vue";

export default {
  name: "matterInfo",
  components: {matterWork,matterRecord,matterReport},
  props: {
    rowData: {
      type: Object,
      default: null,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance(); // 确保 proxy 获取正确
    const { related_law } = proxy.useDict("related_law");
    const initialMatterInfo = {
      matterName: "",
      workContentType: 0,
      matterResponsible: "",
      matterRelatedPersonId: "",
      matterRelatedPerson: "",
      dept: "",
      relatedPolicyId: "",
      relatedLawId: "",
      isKeyWork: 0,
      isSpecialTeamFormed: 0,
      dialogContent: "",
      completionDeadline: "", // 示例日期，实际应从服务器获取
    };
    const data = reactive({
      matterInfo: { ...initialMatterInfo },
    });

    const overdueDays = computed(() => {
      const completionDate = new Date(data.matterInfo.completionDeadline);
      const currentDate = new Date();
      const timeDiff = currentDate - completionDate;
      const dayDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
      return dayDiff > 0 ? dayDiff : 0;
    });

    watch(
      () => props.rowData,
      (newRowData) => {
        if (newRowData) {
          Object.assign(data.matterInfo, newRowData);
        } else {
          Object.assign(data.matterInfo, initialMatterInfo);
        }
      },
      { immediate: true }
    );

    // 监听 matterInfo.relatedLawId 的变化
    const getRelatedLawName = (relatedLawId) => {
      // 从字典中获取相关法律名称
      const law = related_law.value[relatedLawId];
      return law || "未知"; // 如果找不到对应的法律名称，返回 '未知'
    };

    return {
      ...toRefs(data),
      overdueDays,
      getRelatedLawName,
    };
  },
};
</script>

<style scoped>
.app-container {
  padding: 0px;
}
:deep(.el-card .el-card__body) {
  padding: 10px !important;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
